<template>
  <div class="map-container">
    <div class="map-content">
      <!-- Loading 指示器 -->
      <div v-if="loading" class="loading-overlay">加载中...</div>
      <div id="map"></div>

      <!-- 图层切换控制按钮 -->
      <div class="layer-control">
        <div class="layer-toggle" @click="toggleImageLayer" :class="{ active: showImageLayer }">
          <!-- <img src="@/assets/images/satellite.png" alt="卫星影像" title="切换卫星影像" /> -->
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path
              fill="currentColor"
              d="M12,15C12.81,15 13.5,14.31 13.5,13.5C13.5,12.69 12.81,12 12,12C11.19,12 10.5,12.69 10.5,13.5C10.5,14.31 11.19,15 12,15M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20Z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import "ol/ol.css";
import { defaults as defaultInteractions } from "ol/interaction";
import { Map, View } from "ol";
import { DoubleClickZoom } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";

import { vectorLayer, img_wLayer, addZoomListener, createDistrictLayer } from "./config/config.js";
let map = null;
const loading = ref(false);
const showImageLayer = ref(false);

// 切换影像图层显示状态
const toggleImageLayer = () => {
  showImageLayer.value = !showImageLayer.value;
  img_wLayer.setVisible(showImageLayer.value);
};

onMounted(async () => {
  loading.value = true;

  // 创建行政区划图层
  const districtLayer = await createDistrictLayer();
  if (!districtLayer) {
    loading.value = false;
    // 这里可以添加错误提示
    return;
  }

  // 创建地图实例 图层顺序很重要！！！！！！！！！
  map = new Map({
    target: "map", // 将地图渲染到容器中
    interactions: defaultInteractions()
      .getArray()
      .filter((interaction) => !(interaction instanceof DoubleClickZoom)), // 明确移除 DoubleClickZoom
    layers: [
      img_wLayer, // 天地图影像底图（默认不可见）
      districtLayer, // 行政区划图层
      vectorLayer, // 矢量图层
    ],
    view: new View({
      center: [120.5825, 29.9971],
      zoom: 9,
      projection: "EPSG:4326",
      constrainResolution: true,
      maxZoom: 16,
      minZoom: 8,
    }),
  });

  // 设置初始图层可见性
  img_wLayer.setVisible(false);

  // 缩放核心代码
  map.on("moveend", () => {
    const zoom = map.getView().getZoom();
    if (zoom < 10) {
      showDistrictNames(map);
    }
  });

  // 在初始化地图时调用
  addZoomListener(map);

  // 当地图加载完成时，隐藏 loading
  map.on("rendercomplete", () => {
    loading.value = false; // 地图渲染完成后，隐藏 loading
  });
});

const showDistrictNames = (map) => {
  const zoom = map.getView().getZoom();
  // 获取所有图层
  const layers = map.getLayers().getArray();
  // 找到行政区划图层
  const districtLayer = layers.find((layer) => {
    // 通过 source 类型或其他特征来识别行政区划图层
    return layer.getSource() instanceof VectorSource && layer.getZIndex() === 2;
  });

  if (districtLayer) {
    if (zoom >= 8) {
      districtLayer.setVisible(true); // 在特定 zoom 层级显示区名称
    } else {
      districtLayer.setVisible(false); // 隐藏
    }
  }
};
onBeforeUnmount(() => {
  if (map) {
    map.setTarget(null); // 销毁地图实例
  }
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  .map-content {
    z-index: 0;
    #map {
      height: 90vh;
      z-index: 1;
      border: none;
      cursor: move;
      background: #000;
    }
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    z-index: 99; /* 保证 loading 层在地图上层 */
  }

  .layer-control {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;

    .layer-toggle {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #f0f0f0;
      }

      &.active {
        background: #e6f7ff;
        border: 2px solid #1890ff;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
